<!--
 * @Author: 梁青春
 * @Date: 2025-10-16 13:14:37
 * @LastEditTime: 2025-10-16 15:22:07
 * @LastEditors: 梁青春
-->
<template>
  <div class="patient-main">
    <div class="patient-title">
      <div class="title-info">
        <div>住院收费</div>
        <div class="total-price">￥600</div>
      </div>
      <div class="title-opt">
        <el-button>撤销结算</el-button>
        <el-button>开发票</el-button>
        <el-button type="primary">出院结算</el-button>
        <el-button type="primary">续缴押金</el-button>
        <el-button>费用详情</el-button>
        <el-button>打印</el-button>
      </div>
    </div>
    <!--患者信息-->
    <div class="patient-info">
      <!-- 患者头像/性别图标 -->
      <div class="patient-avatar iconfont" :class="[patientInfo.sex === 2 ? 'icon-woman' : 'icon-man']"></div>
      <!-- 患者基本信息 -->
      <div class="patient-details">
        {{ patientInfo.name }} {{ patientInfo.sex === 1 ? '男' : '女' }} {{ patientInfo.age }}岁 / 入院：{{
          patientInfo.admissionDays
        }}天 / 医生：{{ patientInfo.doctor }} / 诊断：{{ patientInfo.diagnosis }}
      </div>

      <!-- 操作按钮 -->
      <div class="patient-actions">
        <el-button size="small" class="detail-btn">详细资料</el-button>
        <el-button size="small" type="success">已出院</el-button>
        <el-button size="small" type="warning">出院核算中</el-button>
      </div>
    </div>

    <!-- 收费信息 -->
    <div class="charging-info">
      <div class="charging-title">收费信息</div>
      <div class="charging-content">
        <!-- 费别选择 -->
        <div class="charge-type">
          <span class="charge-label">费别：</span>
          <el-select
            v-model="chargingInfo.chargeType"
            placeholder="请选择费别"
            size="small"
            @change="handleChargeTypeChange"
          >
            <el-option v-for="item in sys_settlement_type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>

        <!-- 金额信息 -->
        <div class="amount-info">
          <div class="amount-item">
            <span class="amount-label">计费总额</span>
            <span class="amount-value">¥{{ formatAmount(chargingInfo.totalBilling) }}</span>
          </div>
          <div class="amount-item">
            <span class="amount-label">押金余额</span>
            <span class="amount-value">¥{{ formatAmount(chargingInfo.depositBalance) }}</span>
          </div>
          <div class="amount-item">
            <span class="amount-label">待结算</span>
            <span class="amount-value pending">¥{{ formatAmount(chargingInfo.pendingSettlement) }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 收费项目 -->
    <div class="charging-project">
      <el-table :data="projects" style="width: 100%" max-height="66vh">
        <el-table-column prop="name" label="收费项目" />
        <el-table-column prop="chargeType" label="产生日期" width="100" />
        <el-table-column prop="unitPrice" label="单价" width="100" />
        <el-table-column prop="quantity" label="数量" width="100" />
        <el-table-column prop="unit" label="单位" width="100" />
        <el-table-column prop="amount" label="金额" width="100" />
        <el-table-column prop="insuranceAmount" label="医保" width="100" />
      </el-table>
    </div>
  </div>
</template>
<script setup name="Main">
const { proxy } = getCurrentInstance()
const { sys_settlement_type } = proxy.useDict('sys_settlement_type')
const data = reactive({
  patientInfo: {
    name: '贾如君',
    sex: 2, // 1: 男, 2: 女
    age: 20,
    admissionDays: 108,
    doctor: '毒沫风',
    diagnosis: '脑卒中'
  },
  // 收费信息数据
  chargingInfo: {
    chargeType: '医保', // 当前选择的费别
    totalBilling: 600.0, // 计费总额
    depositBalance: 400.0, // 押金余额
    pendingSettlement: 20.0 // 待结算金额
  },
  // 收费项目数据
  projects: [
    {
      name: '住院费',
      chargeType: '医保',
      unitPrice: 60.0,
      quantity: 108,
      unit: '天',
      amount: 600.0,
      insuranceAmount: 300.0
    },
    {
      name: '押金',
      chargeType: '医保',
      unitPrice: 40.0,
      quantity: 1,
      unit: '次',
      amount: 400.0,
      insuranceAmount: 200.0
    }
  ]
})

const { patientInfo, chargingInfo, projects } = toRefs(data)

// 格式化金额显示（保留两位小数）
const formatAmount = amount => {
  if (typeof amount !== 'number') return '0.00'
  return amount.toFixed(2)
}

// 费别变更处理（数据校验）
const handleChargeTypeChange = value => {
  console.log('费别变更为:', value)
  // 这里可以根据费别变更重新计算相关金额
  // 实现数据校验逻辑
  if (!value) {
    ElMessage.warning('请选择有效的费别类型')
    return
  }

  // 模拟根据费别类型更新金额数据
  switch (value) {
    case '医保':
      chargingInfo.value.totalBilling = 600.0
      chargingInfo.value.depositBalance = 400.0
      chargingInfo.value.pendingSettlement = 20.0
      break
    case '自费':
      chargingInfo.value.totalBilling = 800.0
      chargingInfo.value.depositBalance = 500.0
      chargingInfo.value.pendingSettlement = 50.0
      break
    default:
      // 其他费别类型的处理逻辑
      break
  }
}
</script>
<style lang="scss" scoped>
@use '@/assets/styles/variables.module.scss' as *;

.patient-main {
  height: 100%;
  background: $light-bg;
  display: flex;
  flex-direction: column;
  border: solid $border-color;
  border-width: 0 1px 0 1px;
  display: flex;
  flex-direction: column;
}

.patient-title {
  width: 100%;
  display: flex;
  margin: 0 auto;
  background: #fff;
  min-height: $sub-navbar-height;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid $border-color;
  padding: 0 $padding-md;
}

.title-info {
  flex: 1;
  font-size: $font-size-lg;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.title-opt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 4px;
  flex: 1;
}

.total-price {
  font-size: $font-size-lg;
  font-weight: 600;
  margin-right: $margin-md;
}

// 患者信息样式
.patient-info {
  background: #fff;
  padding: $padding-md;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px solid $border-color;
  min-height: $sub-navbar-height;
}

.patient-avatar {
  flex-shrink: 0;
  font-size: $icon-size;
}

.patient-details {
  flex: 1;
  min-width: 520px; // 防止文本溢出
  text-align: left;
  font-size: $font-size;
}

.patient-actions {
  flex-shrink: 0;
  gap: $margin-sm;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  max-width: 300px;
  gap: 4px;
  // 响应式布局
  @media (max-width: 768px) {
    width: 100%;
    justify-content: flex-end;
  }

  @media (max-width: 480px) {
    flex-direction: column;
    width: 100%;
  }

  .detail-btn {
    border-color: $blue;
    color: $blue;

    &:hover {
      background-color: $light-blue;
      border-color: $blue;
      color: $blue;
    }
  }
}

// 收费信息样式
.charging-info {
  border-bottom: 1px solid $border-color;
  background: #fff;
  margin: $margin-md;
  border-radius: $border-radius;
}

.charging-title {
  padding: $padding-md $padding-md 0;
  font-size: $font-size;
  font-weight: 500;
  color: #303133;
}

.charging-content {
  padding: 0 $padding-md $padding-sm $padding-md;
  display: flex;
  justify-content: space-between;
  align-items: center;

  // 响应式布局
  @media (max-width: 768px) {
    flex-direction: column;
    gap: $margin-md;
    align-items: flex-start;
  }
}

.charge-type {
  display: flex;
  align-items: center;
  gap: $margin-sm;

  .charge-label {
    font-size: $font-size;
    color: #606266;
    white-space: nowrap;
  }

  :deep(.el-select) {
    width: 120px;
  }
}

.amount-info {
  display: flex;
  gap: $margin-xl;

  // 响应式布局
  @media (max-width: 768px) {
    width: 100%;
    justify-content: space-between;
    gap: $margin-md;
  }

  @media (max-width: 480px) {
    flex-direction: column;
    gap: $margin-sm;
  }
}

.amount-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  .amount-label {
    font-size: $font-size-sm;
    color: $sub-font-color;
    white-space: nowrap;
  }

  .amount-value {
    font-size: $font-size-lg;
    font-weight: 600;
    color: $blue;

    &.pending {
      color: $yellow;
    }
  }
}

// 项目收费样式
.charging-project {
  border-bottom: 1px solid $border-color;
  background: #fff;
  margin: $margin-md;
  border-radius: $border-radius;
  overflow: hidden;
}
// 响应式优化
@media (max-width: 480px) {
  .charging-content {
    padding: $padding-sm;
  }

  .amount-item {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;

    .amount-label {
      font-size: $font-size;
    }
  }
}
</style>
